<template>
  <div class="login-container">
    <el-form class="login-form" :model="user" :rules="rules" ref="ruleLogin">
      <div class="logo-img">
        <img src="./logo.png" />
      </div>
      <el-form-item prop="userId">
        <el-input
          prefix-icon="el-icon-mobile-phone"
          v-model="user.userId"
          placeholder="请输入账户"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="user.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <!-- 欢迎来到XX教务系统，请输入您的帐号和密码 -->
        <el-checkbox v-model="user.agree"
          >我已阅读并同意用户协议和隐私条款</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="primary"
          :loading="loginLoading"
          @click="onLogin"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import router from "../../router/index";
import { UserService, UserLogin } from "@/api/user";
import Code from "@/consts/common";
import { ElMessage } from "element-plus";

@Options({
  name: "Login",
})
export default class Login extends Vue {
  user = new UserLogin("123456", "123456");
  rules = {
    userId: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  };
  // store = useStore();
  loginLoading = false;
  onLogin() {
    // https://blog.csdn.net/ZD717822023/article/details/107226585
    (this.$refs.ruleLogin as Vue & { validate: Function }).validate(
      (valid: boolean) => {
        if (valid) {
          this.loginLoading = true;
          UserService.login(this.user).then((res) => {
            console.log(res);

            if (res.code == Code.CODE_SUCCESS) {
              router.push({ name: "Layout" });
              localStorage.setItem("userId", this.user.userId);
              localStorage.setItem("token", res.data);
            } else {
              this.loginLoading = false;
              ElMessage({
                showClose: true,
                message: res.message,
                type: "error",
              });
            }
          });
        } else {
          return false;
        }
      }
    );
  }
}
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form {
    background-color: #ffffff;
    padding: 10px 50px;
    min-width: 300px;
    width: 25%;
    max-width: 300px;
    border-radius: 15px;
    .logo-img {
      width: 70%;
      margin: 20px auto;
      img {
        width: 100%;
      }
    }
  }
  .login-btn {
    width: 100%;
  }
}
</style>